<template>
    <div class="login-page">
        <cp-nav-bar right-text="注册" @click-right="$router.push('/register')"></cp-nav-bar>
        <!-- 头部 -->
        <div class="login-head">
            <h3>{{ ispass? '密码登录': '短信验证码登录' }}</h3>
            <a href="javascript:;" @click="ispass = !ispass">
                <span>{{ !ispass ? '密码登录' : '短信验证码登录' }}</span>
                <van-icon name="arrow"></van-icon>
            </a>
        </div>

        <!-- 表单 -->
        <van-form autocomplete="off" @submit="onSubmit" ref="form">
            <van-field placeholder="请输入手机号" name="mobile" type="tel" v-model="mobile" :rules="mobileRules">
            </van-field>
            <van-field v-if="ispass" placeholder="请输入密码" type="password" v-model="password" :rules="passwordRules">
                <template #button>
                    <cp-icon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"></cp-icon>
                </template>
            </van-field>
            <van-field v-else placeholder="短信验证码" v-model="code" :rules="codeRules">
                <template #button>
                    <van-button type="success" class="btn-send" @click="send">{{
                        time > 0 ? time + 's' : '发送验证码'
                    }}</van-button>
                </template>
            </van-field>
            <div class="cp-cell">
                <van-checkbox v-model="agree">
                    <span>我已同意</span>
                    <a href="javascript:;">用户协议</a>
                    <span>及</span>
                    <a href="javascript:;">隐私条款</a>
                </van-checkbox>
            </div>
            <div class="cp-cell">
                <van-button block round type="primary" native-type="submit">登 录</van-button>
            </div>
            <div class="cp-cell">
                <a href="javascript:;">忘记密码？</a>
            </div>
        </van-form>
        <!-- 底部 -->
        <div class="login-other">
            <van-divider>第三方登录</van-divider>
            <div class="icon">
                <img src="@/assets/qq.png" alt="" />
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, type Ref, onUnmounted } from 'vue'
import { mobileRules, passwordRules, codeRules } from '@/utils/rule';
import { showToast } from 'vant'
import { loginByPassword, sendMobileCode, loginByCode } from '@/services/user'
import { useCounterStore } from '@/stores'
import { useRouter } from 'vue-router'

const store = useCounterStore()
const router = useRouter()
const mobile: Ref<string> = ref<string>('13230000001') // 手机号
const password = ref('abc12345') // 密码
const show = ref(false)
const agree = ref(true)// 单选框
const form = ref()
const time = ref(0)
const ispass = ref(true)
let timerId: number = 0
const code = ref('')
// 兜底效验
const onSubmit = async () => {
    if (!agree.value) return showToast('请勾选用户协议')
    const res = ispass.value
        ? await loginByPassword(password.value, mobile.value)
        : await loginByCode(code.value, mobile.value)
    console.log(res);

    try {
        const res = await loginByPassword(password.value, mobile.value)
        console.log('loginByPassword: ', res.data)
        // 1.存储信息到pinia里面，顺便做一个数据持久化到localStorage，这个功能是插件自动完成
        store.setUser(res.data)
        // 2.登录成功以后，跳转到首页，个人中心
        router.push('/')
        showToast('登录成功')
        console.log(form.value);


    } catch (err) {
        console.log('loginByPassword: ', err)
    }
}

// 验证码
const send = async () => {
    // 1. 要倒计时===0，才能发送验证码的请求
    // if (time.value > 0) return
    // 2. 输入的手机号要校验通过了以后，才能发请求
    // 这个是要调用表单的 方法主动去校验某一个字段
    // this.$refs.xxxx.validate(xxx)
    try {
        await form.value.validate('mobile')

        const res = await sendMobileCode(mobile.value, 'login')
        console.log(res.data)

        time.value = 60
        clearInterval(timerId)
        timerId = window.setInterval(() => {
            time.value--
            if (time.value === 0) clearInterval(timerId)
        }, 1000)
    } catch (err) {
        console.log('效验失败: ', err)

    }
}


onUnmounted(() => {
    clearInterval(timerId)
})

</script>

<style lang="scss" scoped>
.login {
    &-page {
        padding-top: 46px;
    }

    &-head {
        display: flex;
        padding: 30px 30px 50px;
        justify-content: space-between;
        align-items: center;
        line-height: 0;

        h3 {
            font-weight: normal;
            font-size: 24px;
        }

        a {
            font-size: 15px;
        }
    }

    &-other {
        margin-top: 60px;
        padding: 0 30px;

        .icon {
            display: flex;
            justify-content: center;

            img {
                width: 36px;
                height: 36px;
                padding: 4px;
            }
        }
    }
}

.van-form {
    padding: 0 14px;

    .cp-cell {
        height: 52px;
        line-height: 24px;
        padding: 14px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .van-button {
            background-color: #13c3a3;
            border: 0;
        }

        .van-checkbox {
            a {
                color: var(--cp-primary);
                padding: 0 5px;
            }
        }
    }

    .btn-send {
        color: #ffffff;


        &.active {
            color: rgba(22, 194, 163, 0.5);
        }
    }
}
</style>
